import React, { PureComponent, Fragment } from "react";
import {
  Button,
  Icon,
  Card,
  Modal,
  Row,
  Col,
  Table,
  Radio,
  Tabs,
  Affix,
  Input,
  Form,
  Tooltip,
  Checkbox,
  notification
} from "antd";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import globalUtil from "../../utils/global";
import { Link } from "dva/router";
import CodeBuildConfig from "../CodeBuildConfig";
import styles from "./setting.less";
import Port from "../../components/Port";
import {
  getMnt,
  addMnt,
  getRelationedApp,
  removeRelationedApp,
  batchAddRelationedApp
} from "../../services/app";
import EditPortAlias from "../../components/EditPortAlias";
import ConfirmModal from "../../components/ConfirmModal";
import AddPort from "../../components/AddPort";
import AddOrEditEnv from "../../components/AddOrEditEnv";
import AddOrEditVolume from "../../components/AddOrEditVolume";
import AddRelationMnt from "../../components/AddRelationMnt";
import AddRelation from "../../components/AddRelation";
import ViewRelationInfo from "../../components/ViewRelationInfo";
import appUtil from "../../utils/app";
import { getVolumeTypeShowName } from "../../utils/utils";

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@connect(
  ({ user, appControl, teamControl }) => ({ currUser: user.currentUser }),
  null,
  null,
  { withRef: true }
)
@Form.create()
class BaseInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      memoryList: [
        {
          text: "64M",
          value: 64
        },
        {
          text: "128M",
          value: 128
        },
        {
          text: "256M",
          value: 256
        },
        {
          text: "512M",
          value: 512
        },
        {
          text: "1G",
          value: 1024
        },
        {
          text: "2G",
          value: 1024 * 2
        },
        {
          text: "4G",
          value: 1024 * 4
        },
        {
          text: "8G",
          value: 1024 * 8
        },
        {
          text: "16G",
          value: 1024 * 16
        }
      ]
    };
  }
  handleSubmit = e => {
    const form = this.props.form;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.props.onSubmit && this.props.onSubmit(fieldsValue);
    });
  };
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px"
    };
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 3
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 21
        }
      }
    };
    const extend_method = this.props.appDetail.service.extend_method;
    const minMemory = this.props.appDetail.service.min_memory;
    const list = this.state.memoryList;
    return (
      <Card
        title="基本信息"
        style={{
          marginBottom: 16
        }}
      >
        <Form.Item {...formItemLayout} label="组件类型">
          {getFieldDecorator("extend_method", {
            initialValue: extend_method || "stateless_multiple",
            rules: [
              {
                required: true,
                message: "请选择组件类型"
              }
            ]
          })(
            <RadioGroup>
              {globalUtil.getSupportComponentTyps().map(item => {
                return (
                  <Radio key={item.type} style={radioStyle} value={item.type}>
                    {item.name}({item.desc}）
                  </Radio>
                );
              })}
            </RadioGroup>
          )}
        </Form.Item>
        <Form.Item {...formItemLayout} label="内存">
          {getFieldDecorator("min_memory", {
            initialValue: minMemory || "",
            rules: [
              {
                required: true,
                message: "请选择内存"
              }
            ]
          })(
            <RadioGroup>
              {minMemory < list[0].value
                ? <RadioButton value={minMemory}>
                    {minMemory}M
                  </RadioButton>
                : null}
              {list.map((item, index) => {
                return (
                  <RadioButton key={index} value={item.value}>
                    {item.text}
                  </RadioButton>
                );
              })}
            </RadioGroup>
          )}
        </Form.Item>
        <Row>
          <Col span="5" />
          <Col span="19">
            <Button onClick={this.handleSubmit} type={"primary"}>
              确认修改
            </Button>
          </Col>
        </Row>
      </Card>
    );
  }
}

@connect(
  ({ user, appControl, teamControl }) => ({ currUser: user.currentUser }),
  null,
  null,
  { withRef: true }
)
class RenderDeploy extends PureComponent {
  constructor(arg) {
    super(arg);
    this.state = {
      runtimeInfo: ""
    };
  }
  componentDidMount() {
    this.getRuntimeInfo();
  }
  handleEditRuntime = (build_env_dict = {}) => {
    this.props.dispatch({
      type: "appControl/editRuntimeBuildInfo",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        build_env_dict
      },
      callback: res => {
        if (res && res._code == 200) {
          notification.success({ message: "修改成功" });
          this.getRuntimeInfo();
        }
      }
    });
  };
  handleEditInfo = (val = {}) => {
    this.props.dispatch({
      type: "appControl/editAppCreateInfo",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        ...val
      },
      callback: data => {
        if (data) {
          this.props.updateDetail();
          notification.success({message: "更新成功"})
        }
      }
    });
  };
  getRuntimeInfo = () => {
    this.props.dispatch({
      type: "appControl/getRuntimeBuildInfo",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias
      },
      callback: data => {
        if (data) {
          this.setState({ runtimeInfo: data.bean ? data.bean : {} });
        }
      }
    });
  };
  render() {
    const language = appUtil.getLanguage(this.props.appDetail);
    const runtimeInfo = this.state.runtimeInfo;
    const visible = this.props.visible;
    if (!this.state.runtimeInfo) return null;
    const appDetail = this.props.appDetail;
    return (
      <div
        style={{
          display: visible ? "block" : "none"
        }}
      >
        <BaseInfo appDetail={appDetail} onSubmit={this.handleEditInfo} />

        {language &&
          runtimeInfo &&
          <CodeBuildConfig
            appDetail={this.props.appDetail}
            onSubmit={this.handleEditRuntime}
            language={language}
            runtimeInfo={this.state.runtimeInfo}
          />}
      </div>
    );
  }
}

//存储管理
@connect(
  ({ user, appControl }) => ({ currUser: user.currentUser }),
  null,
  null,
  { withRef: true }
)
class Mnt extends PureComponent {
  constructor(arg) {
    super(arg);
    this.state = {
      showAddVar: null,
      showAddRelation: false,
      selfPathList: [],
      mntList: [],
      toDeleteMnt: null,
      toDeleteVolume: null,
      volumes: [],
      volumeOpts: []
    };
  }

  componentDidMount() {
    this.fetchVolumeOpts();
    this.loadMntList();
    this.fetchVolumes();
  }
  fetchVolumes = () => {
    this.props.dispatch({
      type: "appControl/fetchVolumes",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        is_config: false
      },
      callback: data => {
        if (data) {
          this.setState({
            volumes: data.list || []
          });
        }
      }
    });
  };
  fetchVolumeOpts = () => {
    this.props.dispatch({
      type: "appControl/fetchVolumeOpts",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias
      },
      callback: data => {
        if (data) {
          this.setState({
            volumeOpts: data.list || []
          });
        }
      }
    });
  };
  loadMntList = () => {
    getMnt({
      team_name: globalUtil.getCurrTeamName(),
      app_alias: this.props.appDetail.service.service_alias,
      page: 1,
      page_size: 1000
    }).then(data => {
      if (data) {
        this.setState({
          mntList: data.list || []
        });
      }
    });
  };
  handleAddVar = () => {
    this.setState({
      showAddVar: {
        new: true
      }
    });
  };
  handleCancelAddVar = () => {
    this.setState({ showAddVar: null });
  };
  handleSubmitAddVar = vals => {
    this.props.dispatch({
      type: "appControl/addVolume",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        ...vals
      },
      callback: () => {
        this.fetchVolumes();
        this.handleCancelAddVar();
      }
    });
  };
  showAddRelation = () => {
    this.setState({ showAddRelation: true });
  };
  handleCancelAddRelation = () => {
    this.setState({ showAddRelation: false });
  };
  handleSubmitAddMnt = mnts => {
    addMnt({
      team_name: globalUtil.getCurrTeamName(),
      app_alias: this.props.appDetail.service.service_alias,
      body: mnts
    }).then(data => {
      if (data) {
        this.handleCancelAddRelation();
        this.loadMntList();
      }
    });
  };
  onDeleteMnt = mnt => {
    this.setState({ toDeleteMnt: mnt });
  };
  onDeleteVolume = data => {
    this.setState({ toDeleteVolume: data });
  };
  onCancelDeleteVolume = () => {
    this.setState({ toDeleteVolume: null });
  };
  handleDeleteVolume = () => {
    this.props.dispatch({
      type: "appControl/deleteVolume",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        volume_id: this.state.toDeleteVolume.ID
      },
      callback: () => {
        this.onCancelDeleteVolume();
        this.fetchVolumes();
      }
    });
  };
  handleDeleteMnt = () => {
    this.props.dispatch({
      type: "appControl/deleteMnt",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        dep_vol_id: this.state.toDeleteMnt.dep_vol_id
      },
      callback: () => {
        this.cancelDeleteMnt();
        this.loadMntList();
      }
    });
  };
  cancelDeleteMnt = () => {
    this.setState({ toDeleteMnt: null });
  };
  getVolumeTypeShowName = volume_type => {
    const { volumeOpts } = this.state;
    return getVolumeTypeShowName(volumeOpts, volume_type);
  };
  render() {
    const { mntList } = this.state;
    const { volumes } = this.state;
    const columns = [
      {
        title: "存储名称",
        dataIndex: "volume_name"
      },
      {
        title: "挂载路径",
        dataIndex: "volume_path"
      },
      {
        title: "存储类型",
        dataIndex: "volume_type",
        render: (text, record) => {
          return (
            <span>
              {this.getVolumeTypeShowName(text)}
            </span>
          );
        }
      },
      {
        title: "存储容量",
        dataIndex: "volume_capacity",
        render: (text, record) => {
          if (text == 0) {
            return <span>不限制</span>;
          }
          return (
            <span>
              {text}GB
            </span>
          );
        }
      },
      {
        title: "状态",
        dataIndex: "status",
        render: (text, record) => {
          if (text == "not_bound") {
            return <span style={{ color: "red" }}>未挂载</span>;
          }
          return <span style={{ color: "green" }}>已挂载</span>;
        }
      },
      {
        title: "操作",
        dataIndex: "action",
        render: (val, data) => {
          return (
            <a
              onClick={() => {
                this.onDeleteVolume(data);
              }}
              href="javascript:;"
            >
              删除
            </a>
          );
        }
      }
    ];
    return (
      <Fragment>
        <Card
          style={{
            marginBottom: 16
          }}
          title={"存储设置"}
        >
          <Table pagination={false} dataSource={volumes} columns={columns} />
          <div
            style={{
              marginTop: 10,
              textAlign: "right"
            }}
          >
            <Button onClick={this.handleAddVar}>
              <Icon type="plus" />
              添加存储
            </Button>
          </div>
        </Card>
        <Card
          style={{
            marginBottom: 16
          }}
          title={"共享存储"}
        >
          <Table
            pagination={false}
            columns={[
              {
                title: "本地挂载路径",
                dataIndex: "local_vol_path",
                key: "1",
                width: "20%",
                render: (data, index) =>
                  <Tooltip title={data}>
                    <span
                      style={{
                        wordBreak: "break-all",
                        wordWrap: "break-word"
                      }}
                    >
                      {data}
                    </span>
                  </Tooltip>
              },
              {
                title: "目标存储名称",
                dataIndex: "dep_vol_name",
                key: "2",
                width: "15%",
                render: (data, index) =>
                  <Tooltip title={data}>
                    <span
                      style={{
                        wordBreak: "break-all",
                        wordWrap: "break-word"
                      }}
                    >
                      {data}
                    </span>
                  </Tooltip>
              },
              {
                title: "目标挂载路径",
                dataIndex: "dep_vol_path",
                key: "3",
                width: "15%",
                render: (data, index) =>
                  <Tooltip title={data}>
                    <span
                      style={{
                        wordBreak: "break-all",
                        wordWrap: "break-word"
                      }}
                    >
                      {data}
                    </span>
                  </Tooltip>
              },
              {
                title: "目标存储类型",
                dataIndex: "dep_vol_type",
                key: "4",
                width: "10%",
                render: (text, record) => {
                  return (
                    <span>
                      {this.getVolumeTypeShowName(text)}
                    </span>
                  );
                }
              },
              {
                title: "目标所属组件",
                dataIndex: "dep_app_name",
                key: "5",
                width: "10%",
                render: (v, data) => {
                  return (
                    <Link
                      to={`/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/components/${data.dep_app_alias}/overview`}
                    >
                      {v}
                    </Link>
                  );
                }
              },
              {
                title: "目标组件所属应用",
                dataIndex: "dep_app_group",
                key: "6",
                width: "15%",
                render: (v, data) => {
                  return (
                    <Link
                      to={`/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/apps/${data.dep_group_id}`}
                    >
                      {v}
                    </Link>
                  );
                }
              },
              {
                title: "操作",
                dataIndex: "action",
                key: "7",
                width: "15%",
                render: (val, data) => {
                  return (
                    <a
                      onClick={() => {
                        this.onDeleteMnt(data);
                      }}
                      href="javascript:;"
                    >
                      取消挂载
                    </a>
                  );
                }
              }
            ]}
            dataSource={mntList}
          />
          <div
            style={{
              marginTop: 10,
              textAlign: "right"
            }}
          >
            <Button onClick={this.showAddRelation}>
              <Icon type="plus" />
              挂载共享存储
            </Button>
          </div>
        </Card>
        {this.state.showAddVar &&
          <AddOrEditVolume
            volumeOpts={this.state.volumeOpts}
            onCancel={this.handleCancelAddVar}
            onSubmit={this.handleSubmitAddVar}
            data={this.state.showAddVar}
          />}
        {this.state.showAddRelation &&
          <AddRelationMnt
            appAlias={this.props.appDetail.service.service_alias}
            onCancel={this.handleCancelAddRelation}
            onSubmit={this.handleSubmitAddMnt}
          />}
        {this.state.toDeleteMnt &&
          <ConfirmModal
            title="取消挂载"
            desc="确定要取消此挂载目录吗?"
            onCancel={this.cancelDeleteMnt}
            onOk={this.handleDeleteMnt}
          />}
        {this.state.toDeleteVolume &&
          <ConfirmModal
            title="删除存储目录"
            desc="确定要删除此存储目录吗?"
            onCancel={this.onCancelDeleteVolume}
            onOk={this.handleDeleteVolume}
          />}
      </Fragment>
    );
  }
}

@connect(
  ({ user, appControl, teamControl }) => ({}),
  null,
  null,
   {withRef: true}
)
class Relation extends PureComponent {
  constructor(arg) {
    super(arg);
    this.state = {
      showAddRelation: false,
      linkList: [],
      relationList: [],
      viewRelationInfo: null
    };
  }
  componentDidMount() {
    this.loadRelationedApp();
  }
  loadRelationedApp = () => {
    getRelationedApp({
      team_name: globalUtil.getCurrTeamName(),
      app_alias: this.props.appDetail.service.service_alias
    }).then(data => {
      if (data) {
        this.setState({
          relationList: data.list || []
        });
      }
    });
  };
  showAddRelation = () => {
    this.setState({ showAddRelation: true });
  };
  handleCancelAddRelation = () => {
    this.setState({ showAddRelation: false });
  };
  handleSubmitAddRelation = ids => {
    batchAddRelationedApp({
      team_name: globalUtil.getCurrTeamName(),
      app_alias: this.props.appDetail.service.service_alias,
      dep_service_ids: ids
    }).then(data => {
      if (data) {
        notification.info({ message: "需要更新才能生效" });
        this.loadRelationedApp();
        this.handleCancelAddRelation();
      }
    });
  };
  handleRemoveRelationed = app => {
    removeRelationedApp({
      team_name: globalUtil.getCurrTeamName(),
      app_alias: this.props.appDetail.service.service_alias,
      dep_service_id: app.service_id
    }).then(data => {
      if (data) {
        this.loadRelationedApp();
      }
    });
  };
  onViewRelationInfo = data => {
    this.setState({ viewRelationInfo: data });
  };
  cancelViewRelationInfo = data => {
    this.setState({ viewRelationInfo: null });
  };
  render() {
    const { linkList, relationList } = this.state;
    return (
      <Card title={"组件依赖"}>
        <Table
          pagination={false}
          columns={[
            {
              title: "组件名称",
              dataIndex: "service_cname",
              render: (val, data) => {
                return (
                  <Link
                    to={`/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/components/${data.service_alias}/overview`}
                  >
                    {val}
                  </Link>
                );
              }
            },
            {
              title: "所属组",
              dataIndex: "group_name"
            },
            {
              title: "操作",
              dataIndex: "var",
              render: (val, data) => {
                return (
                  <Fragment>
                    <a
                      onClick={() => this.onViewRelationInfo(data)}
                      href="javascript:;"
                      style={{
                        marginRight: 8
                      }}
                    >
                      查看链接信息
                    </a>
                    <a
                      onClick={() => {
                        this.handleRemoveRelationed(data);
                      }}
                      href="javascript:;"
                    >
                      取消依赖
                    </a>
                  </Fragment>
                );
              }
            }
          ]}
          dataSource={relationList}
        />
        <div
          style={{
            marginTop: 10,
            textAlign: "right"
          }}
        >
          <Button onClick={this.showAddRelation}>
            <Icon type="plus" />
            添加依赖
          </Button>
        </div>
        {this.state.showAddRelation &&
          <AddRelation
            appAlias={this.props.appDetail.service.service_alias}
            onCancel={this.handleCancelAddRelation}
            onSubmit={this.handleSubmitAddRelation}
          />}
        {this.state.viewRelationInfo &&
          <ViewRelationInfo
            appAlias={this.state.viewRelationInfo.service_alias}
            onCancel={this.cancelViewRelationInfo}
          />}
      </Card>
    );
  }
}

//环境变量
@connect(
  ({ user, appControl, teamControl }) => ({}),
  null,
  null,
   {withRef: true}
)
class Env extends PureComponent {
  constructor(arg) {
    super(arg);
    this.state = {
      showAddVar: false,
      showEditVar: null,
      deleteVar: null,
      innerEnvs: [],
      page: 1,
      page_size: 5,
      total: 0,
      env_name: ""
    };
  }
  componentDidMount() {
    this.fetchInnerEnvs();
  }
  fetchInnerEnvs = () => {
    const { page, page_size, env_name } = this.state;

    this.props.dispatch({
      type: "appControl/fetchInnerEnvs",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        page,
        page_size,
        env_name
      },
      callback: res => {
        if (res) {
          this.setState({
            innerEnvs: res.list || [],
            total: res.bean.total
          });
        }
      }
    });
  };
  handleAddVar = () => {
    this.setState({ showAddVar: true });
  };
  handleCancelAddVar = () => {
    this.setState({ showAddVar: false });
  };
  handleSubmitAddVar = vals => {
    this.props.dispatch({
      type: "appControl/addInnerEnvs",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        attr_name: vals.attr_name,
        attr_value: vals.attr_value,
        name: vals.name
      },
      callback: () => {
        this.handleCancelAddVar();
        this.fetchInnerEnvs();
      }
    });
  };

  onEditVar = data => {
    this.setState({ showEditVar: data });
  };
  cancelEditVar = () => {
    this.setState({ showEditVar: null });
  };
  handleEditVar = vals => {
    const { showEditVar } = this.state;
    this.props.dispatch({
      type: "appControl/editEvns",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        ID: showEditVar.ID,
        attr_value: vals.attr_value,
        name: vals.name
      },
      callback: () => {
        this.cancelEditVar();
        this.fetchInnerEnvs();
      }
    });
  };
  onDeleteVar = data => {
    this.setState({ deleteVar: data });
  };
  cancelDeleteVar = () => {
    this.setState({ deleteVar: null });
  };
  handleDeleteVar = () => {
    this.props.dispatch({
      type: "appControl/deleteEnvs",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        ID: this.state.deleteVar.ID
      },
      callback: () => {
        this.cancelDeleteVar();
        this.fetchInnerEnvs();
      }
    });
  };

  onPageChange = page => {
    this.setState(
      {
        page
      },
      () => {
        this.fetchInnerEnvs();
      }
    );
  };

  render() {
    const innerEnvs = this.state.innerEnvs;
    return (
      <Card
        title="环境变量"
        style={{
          marginBottom: 16
        }}
      >
        <Table
          columns={[
            {
              title: "变量名",
              dataIndex: "attr_name",
              key: "1",
              width: "30%",
              render: v =>
                <div
                  style={{
                    wordBreak: "break-all",
                    wordWrap: "break-word"
                  }}
                >
                  {v}
                </div>
            },
            {
              title: "变量值",
              dataIndex: "attr_value",
              key: "2",
              width: "30%",
              render: v =>
                <div
                  style={{
                    wordBreak: "break-all",
                    wordWrap: "break-word"
                  }}
                >
                  {v}
                </div>
            },
            {
              title: "说明",
              dataIndex: "name",
              key: "3",
              width: "25%",
              render: v =>
                <div
                  style={{
                    wordBreak: "break-all",
                    wordWrap: "break-word"
                  }}
                >
                  {v}
                </div>
            },
            {
              title: "操作",
              dataIndex: "action",
              key: "4",
              width: "15%",
              render: (val, data) => {
                return (
                  <Fragment>
                    {data.is_change
                      ? <a
                          href="javascript:;"
                          style={{
                            marginRight: 8
                          }}
                          onClick={() => {
                            this.onDeleteVar(data);
                          }}
                        >
                          删除
                        </a>
                      : ""}
                    {data.is_change
                      ? <a
                          href="javascript:;"
                          onClick={() => {
                            this.onEditVar(data);
                          }}
                        >
                          修改
                        </a>
                      : ""}
                  </Fragment>
                );
              }
            }
          ]}
          pagination={{
            current: this.state.page,
            pageSize: this.state.page_size,
            total: this.state.total,
            onChange: this.onPageChange
          }}
          dataSource={innerEnvs}
        />
        <div
          style={{
            textAlign: "right",
            paddingTop: 20
          }}
        >
          <Button type="default" onClick={this.handleAddVar}>
            <Icon type="plus" />
            添加变量
          </Button>
        </div>
        {this.state.showAddVar &&
          <AddOrEditEnv
            onCancel={this.handleCancelAddVar}
            onSubmit={this.handleSubmitAddVar}
          />}
        {this.state.showEditVar &&
          <AddOrEditEnv
            onCancel={this.cancelEditVar}
            onSubmit={this.handleEditVar}
            data={this.state.showEditVar}
          />}
        {this.state.deleteVar &&
          <ConfirmModal
            onOk={this.handleDeleteVar}
            onCancel={this.cancelDeleteVar}
            title="删除变量"
            desc="确定要删除此变量吗？"
            subDesc="此操作不可恢复"
          />}
      </Card>
    );
  }
}

//端口
@connect(
  ({ user, appControl, teamControl }) => ({}),
  null,
  null,
   {withRef: true}
)
class Ports extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showEditAlias: null,
      showDeleteDomain: null,
      showDeletePort: null,
      showDeleteDomain: null,
      showAddPort: false,
      ports: []
    };
  }
  componentDidMount() {
    this.fetchPorts();
  }
  fetchPorts = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "appControl/fetchPorts",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias
      },
      callback: data => {
        this.setState({
          ports: (data && data.list) || []
        });
      }
    });
  };
  handleSubmitProtocol = (protocol, port, callback) => {
    const { dispatch } = this.props;
    dispatch({
      type: "appControl/changeProtocol",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: port,
        protocol: protocol
      },
      callback: () => {
        this.fetchPorts();
        callback();
      }
    });
  };
  showEditAlias = port => {
    this.setState({ showEditAlias: port });
  };
  hideEditAlias = () => {
    this.setState({ showEditAlias: null });
  };
  handleEditAlias = vals => {
    this.props.dispatch({
      type: "appControl/editPortAlias",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: this.state.showEditAlias.container_port,
        port_alias: vals.alias
      },
      callback: () => {
        this.fetchPorts();
        this.hideEditAlias();
      }
    });
  };
  handleOpenInner = port => {
    this.props.dispatch({
      type: "appControl/openPortInner",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: port
      },
      callback: () => {
        this.fetchPorts();
      }
    });
  };
  onCloseInner = port => {
    this.props.dispatch({
      type: "appControl/closePortInner",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: port
      },
      callback: () => {
        this.fetchPorts();
      }
    });
  };
  handleOpenOuter = port => {
    this.props.dispatch({
      type: "appControl/openPortOuter",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: port
      },
      callback: () => {
        this.fetchPorts();
      }
    });
  };
  onCloseOuter = port => {
    this.props.dispatch({
      type: "appControl/closePortOuter",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: port
      },
      callback: () => {
        this.fetchPorts();
      }
    });
  };
  handleDeletePort = port => {
    this.setState({ showDeletePort: port });
  };
  cancalDeletePort = () => {
    this.setState({ showDeletePort: null });
  };
  handleSubmitDeletePort = () => {
    this.props.dispatch({
      type: "appControl/deletePort",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        port: this.state.showDeletePort
      },
      callback: () => {
        this.cancalDeletePort();
        this.fetchPorts();
      }
    });
  };
  showAddPort = () => {
    this.setState({ showAddPort: true });
  };

  onCancelAddPort = () => {
    this.setState({ showAddPort: false });
  };
  handleAddPort = val => {
    this.props.dispatch({
      type: "appControl/addPort",
      payload: {
        team_name: globalUtil.getCurrTeamName(),
        app_alias: this.props.appDetail.service.service_alias,
        protocol: val.protocol,
        port: val.port
      },
      callback: () => {
        this.onCancelAddPort();
        this.fetchPorts();
      }
    });
  };
  render() {
    const ports = this.state.ports || [];
    const isImageApp = appUtil.isImageApp(this.props.appDetail);
    const isDockerfile = appUtil.isDockerfile(this.props.appDetail);
    return (
      <Card
        title="端口管理"
        style={{
          marginBottom: 16
        }}
      >
        <div className={styles.ports}>
          {ports.map(port => {
            return (
              <Port
                key={port.ID}
                showOuterUrl={false}
                showDomain={false}
                port={port}
                onDelete={this.handleDeletePort}
                onEditAlias={this.showEditAlias}
                onSubmitProtocol={this.handleSubmitProtocol}
                onOpenInner={this.handleOpenInner}
                onCloseInner={this.onCloseInner}
                onOpenOuter={this.handleOpenOuter}
                onCloseOuter={this.onCloseOuter}
              />
            );
          })}
          {!ports.length
            ? <p
                style={{
                  textAlign: "center"
                }}
              >
                暂无端口
              </p>
            : ""}
        </div>
        <div
          style={{
            textAlign: "right",
            paddingTop: 20
          }}
        >
          <Button type="default" onClick={this.showAddPort}>
            <Icon type="plus" />
            添加端口
          </Button>
        </div>
        {this.state.showEditAlias &&
          <EditPortAlias
            port={this.state.showEditAlias}
            onOk={this.handleEditAlias}
            onCancel={this.hideEditAlias}
          />}
        {this.state.showDeletePort &&
          <ConfirmModal
            title="端口删除"
            desc="确定要删除此端口吗？"
            subDesc="此操作不可恢复"
            onOk={this.handleSubmitDeletePort}
            onCancel={this.cancalDeletePort}
          />}
        {this.state.showDeleteDomain &&
          <ConfirmModal
            title="域名解绑"
            desc="确定要解绑此域名吗？"
            subDesc={this.state.showDeleteDomain.domain}
            onOk={this.handleSubmitDeleteDomain}
            onCancel={this.cancalDeleteDomain}
          />}
        {this.state.showAddPort &&
          <AddPort
            isImageApp={isImageApp}
            isDockerfile={isDockerfile}
            onCancel={this.onCancelAddPort}
            onOk={this.handleAddPort}
          />}
      </Card>
    );
  }
}

class RenderProperty extends PureComponent {
  render() {
    const visible = this.props.visible;
    const { appDetail } = this.props;
    return (
      <div
        style={{
          display: visible ? "block" : "none"
        }}
      >
        <Ports appDetail={appDetail} />
        <Env appDetail={appDetail} />
        <Mnt appDetail={appDetail} />
        <Relation appDetail={appDetail} />
      </div>
    );
  }
}

@connect(
  ({ user, appControl }) => ({ currUser: user.currentUser }),
  null,
  null,
  { withRef: true }
)
export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      //property、deploy
      type: "property"
    };
  }
  getAppAlias() {
    return this.props.match.params.appAlias;
  }
  handleType = type => {
    if (this.state.type !== type) {
      this.setState({ type: type });
    }
  };
  render() {
    const { appDetail } = this.props;
    const type = this.state.type;

    return (
      <div>
        <div
          style={{
            overflow: "hidden"
          }}
        >
          <div className={styles.typeBtnWrap}>
            <Affix offsetTop={0}>
              <div>
                <span
                  className={
                    styles.typeBtn +
                    " " +
                    (type === "property" ? styles.active : "")
                  }
                  onClick={() => {
                    this.handleType("property");
                  }}
                >
                  基本属性
                  <Icon type="right" />
                </span>
                <span
                  className={
                    styles.typeBtn +
                    " " +
                    (type === "deploy" ? styles.active : "")
                  }
                  onClick={() => {
                    this.handleType("deploy");
                  }}
                >
                  部署属性
                  <Icon type="right" />
                </span>
              </div>
            </Affix>
          </div>

          <div
            className={styles.content}
            style={{
              overflow: "hidden",
              marginBottom: 90
            }}
          >
            <RenderDeploy
              updateDetail={this.props.updateDetail}
              appDetail={appDetail}
              visible={type === "deploy"}
            />
            <RenderProperty key={appDetail.service.extend_method} appDetail={appDetail} visible={type !== "deploy"} />
          </div>
        </div>
      </div>
    );
  }
}
